<template>
  <div class='mobile-cascader-wrapper'>
    <!-- 【注】 valid-tip-box 类名将作为paper页面的DOM索引，不能修改 -->
    <div class='valid-tip-box'
         v-if='question.validType === "required"'>
      请选择完整答案
    </div>
    <!-- 用于记录回显 -->
    <div class='cascader-record' v-if='isRecord'>
      <div class='cascader-item hideArrow'
           v-for='(levelName, index) of levelRecords'
           :key='index'>
        <span class='item-result'>{{levelName}}</span>
      </div>
    </div>
    <!-- 一级选项 -->
    <div class='cascader-item'
         v-if='question.optLev1[0] && !isRecord'
         @click='showLevelOption(1)'>
      <span class='item-placeholder' v-if='!question.level1'>
        {{question.optionList[0].title}}
      </span>
      <span class='item-result' v-else>{{question.level1Name}}</span>
    </div>
    <!-- 二级选项 -->
    <div class='cascader-item'
         v-if='question.optLev2[0] && !isRecord'
         @click='showLevelOption(2)'>
      <span class='item-placeholder' v-if='!question.level2'>
        {{question.optionList[1].title}}
      </span>
      <span class='item-result' v-else>{{question.level2Name}}</span>
    </div>
    <!-- 三级选项 -->
    <div class='cascader-item'
         v-if='question.optLev3[0] && !isRecord'
         @click='showLevelOption(3)'>
      <span class='item-placeholder' v-if='!question.level3'>
        {{question.optionList[2].title}}
      </span>
      <span class='item-result' v-else>{{question.level3Name}}</span>
    </div>
    <!-- 四级选项 -->
    <div class='cascader-item'
         v-if='question.optLev4[0] && !isRecord'
         @click='showLevelOption(4)'>
      <span class='item-placeholder' v-if='!question.level4'>
        {{question.optionList[3].title}}
      </span>
      <span class='item-result' v-else>{{question.level4Name}}</span>
    </div>
    <!-- 一级选项picker -->
    <popup v-model="showLevel1Opts" position="bottom">
      <picker
        show-toolbar
        value-key='title'
        :columns="question.optLev1"
        @confirm='changeLevel1'
        @cancel='showLevel1Opts = false'
      />
    </popup>
    <!-- 二级选项picker -->
    <popup v-model="showLevel2Opts" position="bottom">
      <picker
        show-toolbar
        value-key='title'
        :columns="question.optLev2"
        @confirm='changeLevel2'
        @cancel='showLevel2Opts = false'
      />
    </popup>
    <!-- 三级选项picker -->
    <popup v-model="showLevel3Opts" position="bottom">
      <picker
        show-toolbar
        value-key='title'
        :columns="question.optLev3"
        @confirm='changeLevel3'
        @cancel='showLevel3Opts = false'
      />
    </popup>
    <!-- 四级选项picker -->
    <popup v-model="showLevel4Opts" position="bottom">
      <picker
        show-toolbar
        value-key='title'
        :columns="question.optLev4"
        @confirm='changeLevel4'
        @cancel='showLevel4Opts = false'
      />
    </popup>
  </div>
</template>

<script>
import picker from 'vant/lib/picker'
import popup from 'vant/lib/popup'
import 'vant/lib/picker/style'
import 'vant/lib/popup/style'
export default {
  name: 'mobileCascader',
  data () {
    return {
      // extendAttr: {
      //   size: 'small',
      //   validate: 'none',
      //   minLength: 1,
      //   maxLength: 10,
      //   defaultText: ''
      // },
      // answer: ''
      currChangeLevel: 1,
      currOptions: [],
      showLevel1Opts: false,
      showLevel2Opts: false,
      showLevel3Opts: false,
      showLevel4Opts: false,
      levelRecords: []
    }
  },
  components: {
    picker,
    popup
  },
  props: {
    question: {
      type: Object,
      default () {
        return {}
      }
    },
    isRecord: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    resetValidType () {
      this.question.validType = ''
    },
    changeLevel1 (val) {
      this.showLevel1Opts = false
      this.question.level1 = val.optionId
      this.question.level1Name = val.title
      // 清空数据
      this.question.level2 = ''
      this.question.level3 = ''
      this.question.level4 = ''
      this.question.level2Name = ''
      this.question.level3Name = ''
      this.question.level4Name = ''
      this.question.optLev2 = []
      this.question.optLev3 = []
      this.question.optLev4 = []
      // 如果有二级选项，更新二级选项
      if (this.question.optionList[1]) {
        this.question.optionData.forEach(optionLev1 => {
          if (optionLev1.optionId === this.question.level1) {
            this.question.optLev2 = this.getOptions(optionLev1.children || [])
          }
        })
      }
      console.log('question.optLev2: ', this.question.optLev2)
    },
    changeLevel2 (val) {
      this.showLevel2Opts = false
      this.question.level2 = val.optionId
      this.question.level2Name = val.title
      // 清空数据
      this.question.level3 = ''
      this.question.level4 = ''
      this.question.level3Name = ''
      this.question.level4Name = ''
      this.question.optLev3 = []
      this.question.optLev4 = []
      // 如果有三级选项，更新三级选项
      if (this.question.optionList[2]) {
        this.question.optionData.forEach(optionLev1 => {
          if (optionLev1.optionId === this.question.level1) {
            optionLev1.children.forEach(optionLev2 => {
              if (optionLev2.optionId === this.question.level2) {
                this.question.optLev3 = this.getOptions(optionLev2.children || [])
              }
            })
          }
        })
      }
    },
    changeLevel3 (val) {
      this.showLevel3Opts = false
      this.question.level3 = val.optionId
      this.question.level3Name = val.title
      // 清空数据
      this.question.level4 = ''
      this.question.level4Name = ''
      this.question.optLev4 = []
      // 如果有四级选项，更新四级选项
      if (this.question.optionList[3]) {
        this.question.optionData.forEach(optionLev1 => {
          if (optionLev1.optionId === this.question.level1) {
            optionLev1.children.forEach(optionLev2 => {
              if (optionLev2.optionId === this.question.level2) {
                optionLev2.children.forEach(optionLev3 => {
                  if (optionLev3.optionId === this.question.level3) {
                    this.question.optLev4 = this.getOptions(optionLev3.children || [])
                  }
                })
              }
            })
          }
        })
      }
    },
    changeLevel4 (val) {
      this.showLevel4Opts = false
      this.question.level4 = val.optionId
      this.question.level4Name = val.title
    },
    showLevelOption (level) {
      if (this.isRecord) {
        return false
      }
      this.resetValidType()
      this.currChangeLevel = level
      switch (level) {
        case 1: this.showLevel1Opts = true; break
        case 2: this.showLevel2Opts = true; break
        case 3: this.showLevel3Opts = true; break
        case 4: this.showLevel4Opts = true; break
      }
    },
    init () {
      // 初始化一级选项
      this.question.optLev1 = this.getOptions(this.question.optionData || [])
      console.log('question.optLev1：', this.question.optLev1)
      this.question.optLev2 = []
      this.question.optLev3 = []
      this.question.optLev4 = []
      this.question.level1 = ''
      this.question.level1Name = ''
      this.question.level2 = ''
      this.question.level2Name = ''
      this.question.level3 = ''
      this.question.level3Name = ''
      this.question.level4 = ''
      this.question.level4Name = ''
      // 如果是查看记录模式, 回显答题记录
      if (this.isRecord) {
        console.log('record question: ', this.question)
        let answer = this.question.answer
        let levelRecords = []
        if (answer && answer[0] && answer[0].resultText) {
          let resultText = JSON.parse(answer[0].resultText)
          for (let key of Object.keys(resultText)) {
            if (resultText[key]) {
              levelRecords.push(resultText[key])
            }
          }
          this.levelRecords = levelRecords
        }
      }
    },
    // 过滤数组成员中的chldren字段
    getOptions (arr) {
      let _arr = JSON.parse(JSON.stringify(arr))
      _arr.forEach(item => {
        delete item.children
      })
      return _arr
    }
  },
  created () {
    console.log('cascader question: ', this.question)
    this.init()
  }
}
</script>

<style lang="stylus" scoped>
.mobile-cascader-wrapper
  margin-top 10px
  .valid-tip-box
    color #ef6262
    font-size 14px
    margin-bottom 5px
  .cascader-item
    position relative
    padding 0 30px 0 10px
    border: 1px solid #dde5ed
    box-sizing: border-box
    height 36px
    border-radius 4px
    margin-bottom 5px
    display flex
    align-items center
    font-size 12px
    no-wrap()
    cursor pointer
    &.hideArrow
      &::after
        display none
    &::after
      content ''
      display block
      position absolute
      right 10px
      top 0
      bottom 0
      margin auto
      width 17px
      height 10px
      background url('~assets/img/survey2.0/arrow-down.png') no-repeat center / 12px auto
    .item-placeholder
      color #bbb
</style>
